<template>
	<view>
		<view id="guideId" class="c-box">
			<view class="guid-header">
				<view class="guid-button" :class="{ 'guid-button-active':activeType[0] }" @click="switchType(0)">
					采购商操作指南
				</view>
				<view class="guid-button" :class="{ 'guid-button-active':activeType[1] }" @click="switchType(1)">
					供应商操作指南
				</view>
			</view>
			<view class="search">
				<view class="input">
					<image src="https://m.nocexpo.com/statics/js/modules/h5/img/search3.png" />
						<input id="searchInput" type="text" ref="searchKey" v-model="guideName"
							   placeholder="请输入指南名称">
				</view>
				<view class="cancel" style="width: 14.6%;margin-left: -16%;">
					<image style="width: 110rpx;height: 50rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/search4.png" @click="searchGuide"/>
				</view>
				<view class="cancel" style="width: 5.6%;margin-left: -21%;" @click="clearSearch" v-if="guideName">
					<image style="width: 60rpx;height: 60rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/clear.png" @click="searchGuide"/>
				</view>
			</view>
			<view class="message" style="margin-top: 0.5rem">
				<view class="ul" style="width: 96%; margin-left: 2%;">
					<view class="li" v-for="item in guideList" :key="item.id" style="height:52px;margin-top: 10px; border-bottom: 2px solid #ededed;background-color: #fff;">
						<view class="a" href="javascript:void(0);" @click="toDetail(item.id)" style="padding: 28rpx 28rpx 0 28rpx;">
							<view class="tit">
								<view class="mt">
									<view class="name item-title1" style="font-size: 30rpx;position: absolute;left: 6%;">{{item.title}}</view>
				
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="c-h120"></view>
		</view>
	</view>
</template>

<script>
import guideApi from '@/api/guide.js';
import commonApi from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			guideList: [],
			guideType1:[],//采购商操作指南列表
			guideType2:[],//供应商商操作指南列表
			activeType:[true,false],
			guideName:'',//搜索搜测名称
			currentType:'1',
		}
	},
	 created() {
		this.query();
	},
	methods: {
		query() {
			guideApi.getGuideList().then(res => {
				res.data.guideList.forEach((value,index,array)=>{
					if (value.guideType == 1){
						this.guideType2.push(value)
					}else{
						this.guideType1.push(value)
					}
				})
				this.guideList = this.guideType1
			})
		},
		toDetail(id) {
			console.log("跳转");
			uni.navigateTo({
				url:'/pages/guide/guideDetail?id=' + id
			})
			// window.location.href = "/h5/guideDetail.html?id=" + id;
		},
		switchType(e){
			this.currentType = e + 1
			if (!this.activeType[e]){
				this.activeType.forEach((value,index,array)=>{
					if (index == e){
						this.activeType[index] = true;
					}else{
						this.activeType[index] = false;
					}
				})
				this.setGuide()
				this.$forceUpdate()
			}

		},
		searchGuide(){
			let searchList = []
			this.guideList.forEach((value,index,array) => {
				if (value.title.indexOf(this.guideName) != -1){
					searchList.push(value)
				}
			})
			this.guideList = searchList
		},
		clearSearch(){
			console.log(2);
			this.guideName = ''
			this.setGuide()
		},
		setGuide(){
			if(1 == this.currentType){
				this.guideList = this.guideType1
			}else{
				this.guideList = this.guideType2
			}
		}

	},
	mounted: function () {


	},
}
</script>

<style>
	.search .input input::-webkit-input-placeholder {
		color:#aab2bd;
	}
	.guid-header{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.guid-button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 70rpx;
		background-color: #bcbcbc;
		color: white;
		font-weight: bold;
		font-size: 13px;
		border-radius: 4px;
		margin-top: 35rpx;
	}
	.guid-button-active{
		background-color:  #059d9e;
	}

	.search {
		width: 100%;
		margin-top: 35rpx;
		padding: 0 30rpx;
		height: 85rpx;
		overflow: hidden;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.searchList .search .input {
		width: 62%;
	}
	.search .input{
		width: 85%;
		float: right;
		padding: 0 30rpx;
		height: 60rpx;
		border-radius: 35rpx;
		font-size: 20rpx;
		background-color: #f7f7f7;
	}
	.search .input input {
		color:black;
		width: 470rpx;
		float: left;
		height: 60rpx;
		line-height: 60rpx;
		border: 0;
		background: transparent;
		color: #bbb;
		font-size: 23rpx;
	}
	.search .input image {
	    float: left;
	    width: 25rpx;
	    margin-top: 18rpx;
	    margin-right: 20rpx;
		height: 25rpx;
	}


	.bottom {
		margin-top: 1.2rem;
	}
	.return {
		float: left;
		width: 0.6rem;
		margin-right: 0.2rem;
	}
	.item-title1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}
	.message .tit .mt {
	    overflow: hidden;
	    line-height: 30rpx;
	    padding-top: 9rpx;
	    margin-bottom: 11rpx;
	}
	.message .tit .mt .name {
	    float: left;
	    font-size: 30rpx;
	    color: #333333;
	    margin-right: 19rpx;
	}

</style>